<template>
	<view class="container">
		<!-- 筛选标签 -->
		<!-- <view class="filter-tabs">
			<view v-for="tab in tabs" :key="tab.id" class="tab" :class="{ active: activeTab === tab.id }"
				@click="switchTab(tab.id)">
				{{ tab.name }}
			</view>
		</view> -->
		<view class="task-card" style="margin: 0;border-radius: 0%;">
			<view class="pageTop">
				<text class="task-name">零售-全生命周期经营</text>
			</view>
			<view class=" taskCardDisplay">
				<view class="task-info">
					<view class="task-progress">
						<text class="progress-text">通关进度: 1/3</text>
						<text class="task-status" :class="getStatusClass('not-started')">
							{{ getStatusText('not-started') }}
						</text>
					</view>
				</view>
			</view>

		</view>

		<!-- 任务列表 -->
		<view class="task-list">
			<view v-for="task in tasks" :key="task" class="task-card">
				<view class="page-header">
					<text class="task-name">呵呵哈哈哈</text>
				</view>
				<view class=" taskCardDisplay">
					<view class="task-info">

						<view class="task-progress">
							<text class="progress-text">训练模式: 智能训练</text>

						</view>
						<view class="task-progress">
							<text class="progress-text">场景:零售-全生命周期经营</text>

						</view>
						<view class="task-progress">
							<text class="progress-text">通过要求: 不低于80分</text>

						</view>
					</view>
					<view style="display: flex;">
						<u-button size="small" type="primary" :plain="true" @click="viewTask(task.id)" text="榜单"></u-button>
						<u-button style="margin-left: 10rpx;" type="primary" size="small" @click="viewTask(task.id)"
							text="查看对话"></u-button>
					</view>
				</view>


			</view>

			<view v-if="filteredTasks.length === 0" class="empty-state">
				<text class="empty-icon">📋</text>
				<text>暂无任务数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				tabs: [{
						id: 'all',
						name: '全部'
					},
					{
						id: 'not-started',
						name: '未开始'
					},
					{
						id: 'in-progress',
						name: '进行中'
					},
					{
						id: 'completed',
						name: '已结束'
					}
				],
				tasks: [{
						id: 1,
						name: '零售业务-全生命周期经营',
						progress: 0,
						total: 5,
						status: 'not-started'
					},
					{
						id: 2,
						name: '零售业务-分客群经营',
						progress: 0,
						total: 5,
						status: 'not-started'
					},
					{
						id: 3,
						name: '零售业务-分客群经营',
						progress: 1,
						total: 5,
						status: 'in-progress'
					},
					{
						id: 4,
						name: '零售业务-场景化经营',
						progress: 3,
						total: 5,
						status: 'in-progress'
					},
					{
						id: 5,
						name: '零售业务-数字化转型',
						progress: 5,
						total: 5,
						status: 'completed'
					},
				]
			}
		},

		computed: {
			filteredTasks() {
				if (this.activeTab === 'all') {
					return this.tasks
				}

				return this.tasks.filter(task => {
					if (this.activeTab === 'not-started') {
						return task.status === 'not-started'
					} else if (this.activeTab === 'in-progress') {
						return task.status === 'in-progress'
					} else if (this.activeTab === 'completed') {
						return task.status === 'completed'
					}

					return true
				})
			}
		},
		onLoad(options) {
			if (options) {
				this.tasks = options;
			}
		},
		methods: {
			switchTab(tabId) {
				this.activeTab = tabId
			},

			getStatusClass(status) {
				const statusClasses = {
					'not-started': 'status-not-started',
					'in-progress': 'status-in-progress',
					'completed': 'status-completed'
				}
				return statusClasses[status] || 'status-not-started'
			},

			getStatusText(status) {
				const statusTexts = {
					'not-started': '未完成',
					'in-progress': '进行中',
					'completed': '已完成'
				}
				return statusTexts[status] || '未知'
			},

			viewTask(taskId) {
				// 跳转到任务详情页
				// uni.navigateTo({
				// 	url: `/pages/task/detail?id=${taskId}`
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		width: 100%;
		// white-space: nowrap;
	}

	.container {
		background: #f5f7fa;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.pageTop {
		background: none;
		padding: 16rpx;
	}

	.page-header {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		padding: 10rpx;
		box-sizing: border-box;
		// text-align: center;
		width: 100%;
	}

	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
		display: block;
	}

	.page-subtitle {
		font-size: 28rpx;
		opacity: 0.9;
		display: block;
	}

	.filter-tabs {
		display: flex;
		background: white;
		border-bottom: 1rpx solid #e8e8e8;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #666;
		position: relative;
	}

	.tab.active {
		color: #1890ff;
		font-weight: 500;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20%;
		right: 20%;
		height: 6rpx;
		background: #1890ff;
		border-radius: 6rpx;
	}

	.task-list {
		flex: 1;
		padding: 0 30rpx 40rpx;
		overflow-y: scroll;
	}

	.task-card {
		background: white;
		border-radius: 16rpx;
		// padding: 30rpx 0;
		margin-top: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		// align-items: center;
		transition: all 0.2s;
		// display: flex;
		// flex-direction: row;
		// align-items: flex-end;
	}

	.taskCardDisplay {
		// margin-top: 30rpx;
		padding: 30rpx;
		background: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 16rpx;
	}

	.task-card:active {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	}

	.task-info {
		flex: 1;
	}

	.task-name {
		font-size: 32rpx;
		// font-weight: 600;
		// margin-bottom: 16rpx;
		color: #262626;
		display: block;
	}

	.task-progress {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #666;
	}

	.progress-text {
		margin-right: 20rpx;
	}

	.task-status {
		padding: 6rpx 16rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-not-started {
		background: #f5f5f5;
		color: #8c8c8c;
	}

	.status-in-progress {
		background: #e6f7ff;
		color: #1890ff;
	}

	.status-completed {
		background: #f6ffed;
		color: #52c41a;
	}

	.view-task-btn {
		width: auto;
		background: #1890ff;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.empty-state {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #8c8c8c;
	}

	.empty-icon {
		font-size: 96rpx;
		margin-bottom: 30rpx;
		opacity: 0.5;
		display: block;
	}

	/* 响应式设计 */
	// @media (max-width: 750px) {
	// 	.task-card {
	// 		flex-direction: column;
	// 		align-items: flex-start;
	// 	}

	// 	.task-info {
	// 		width: 100%;
	// 		margin-bottom: 30rpx;
	// 	}

	// 	.view-task-btn {
	// 		align-self: flex-end;
	// 	}
	// }
</style>